<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>待办任务 - 报销系统</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.7.2/font/bootstrap-icons.css">
    <style>
        body {
            min-height: 100vh;
            background-color: #f8f9fa;
        }
        .navbar {
            box-shadow: 0 2px 4px rgba(0,0,0,.1);
        }
        .content {
            padding: 2rem 0;
        }
        .card {
            border: none;
            border-radius: 15px;
            box-shadow: 0 4px 6px rgba(0,0,0,.1);
            margin-bottom: 1.5rem;
        }
        .card-header {
            background: linear-gradient(135deg, #0d6efd 0%, #0a58ca 100%);
            color: white;
            border-radius: 15px 15px 0 0 !important;
            padding: 1.5rem;
        }
        .card-header h2 {
            margin: 0;
            font-size: 1.5rem;
            font-weight: 600;
        }
        .task-card {
            border: 1px solid #e9ecef;
            border-radius: 12px;
            margin-bottom: 1rem;
            transition: transform 0.2s;
        }
        .task-card:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 6px rgba(0,0,0,.1);
        }
        .task-header {
            padding: 1rem;
            border-bottom: 1px solid #e9ecef;
            background-color: #f8f9fa;
            border-radius: 12px 12px 0 0;
        }
        .task-body {
            padding: 1rem;
        }
        .task-footer {
            padding: 1rem;
            background-color: #fff;
            border-radius: 0 0 12px 12px;
        }
        .comments {
            background-color: #f8f9fa;
            border-radius: 8px;
            padding: 1rem;
            margin: 1rem 0;
        }
        .comment-item {
            padding: 0.5rem;
            border-left: 3px solid #0d6efd;
            margin-bottom: 0.5rem;
            background-color: white;
            border-radius: 0 8px 8px 0;
        }
        .process-diagram {
            margin: 1rem 0;
            text-align: center;
        }
        .process-diagram img {
            max-width: 100%;
            height: auto;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0,0,0,.1);
        }
        .empty-state {
            text-align: center;
            padding: 3rem;
        }
        .empty-state i {
            font-size: 3rem;
            color: #6c757d;
            margin-bottom: 1rem;
        }
        .form-control:focus {
            box-shadow: none;
            border-color: #0d6efd;
        }
        .btn-group-approval {
            display: flex;
            gap: 0.5rem;
        }
        .back-link {
            display: inline-flex;
            align-items: center;
            color: #6c757d;
            text-decoration: none;
            margin-bottom: 1rem;
        }
        .back-link:hover {
            color: #0d6efd;
        }
    </style>
</head>
<body>
    <!-- 导航栏 -->
    <nav class="navbar navbar-expand-lg navbar-dark bg-primary">
        <div class="container">
            <a class="navbar-brand" href="#">报销审批系统</a>
            <div class="d-flex">
                <a th:href="@{/}" class="btn btn-outline-light btn-sm">
                    <i class="bi bi-house-door me-1"></i>返回首页
                </a>
            </div>
        </div>
    </nav>

    <!-- 主要内容 -->
    <div class="content">
        <div class="container">
            <a th:href="@{/}" class="back-link">
                <i class="bi bi-arrow-left me-2"></i>返回首页
            </a>

            <div class="card">
                <div class="card-header">
                    <h2><i class="bi bi-list-task me-2"></i>待办任务</h2>
                </div>
                <div class="card-body">
                    <!-- 空状态 -->
                    <div th:if="${tasks.empty}" class="empty-state">
                        <i class="bi bi-inbox"></i>
                        <h3>暂无待办任务</h3>
                        <p class="text-muted">当前没有需要您处理的报销申请</p>
                    </div>

                    <!-- 任务列表 -->
                    <div th:if="${!tasks.empty}" class="task-list">
                        <div th:each="task : ${tasks}" class="task-card">
                            <div class="task-header">
                                <div class="d-flex justify-content-between align-items-center">
                                    <h5 class="mb-0" th:text="${task.name}">任务名称</h5>
                                    <span class="badge bg-primary">
                                        <i class="bi bi-clock me-1"></i>
                                        <span th:text="${#dates.format(task.createTime, 'yyyy-MM-dd HH:mm')}">
                                            创建时间
                                        </span>
                                    </span>
                                </div>
                            </div>

                            <div class="task-body">
                                <!-- 处理记录 -->
                                <div class="comments" th:if="${taskComments.get(task.id)} and ${!taskComments.get(task.id).empty}">
                                    <h6 class="mb-3">
                                        <i class="bi bi-chat-text me-1"></i>处理记录
                                    </h6>
                                    <div class="comment-item" th:each="comment : ${taskComments.get(task.id)}">
                                        <p class="mb-0" th:text="${comment}">评论内容</p>
                                    </div>
                                </div>

                                <!-- 流程图 -->
                                <div class="process-diagram">
                                    <img th:src="@{/expense/processDiagram(processInstanceId=${task.processInstanceId})}" 
                                         alt="流程图" class="img-fluid"/>
                                </div>

                                <!-- 审批表单 -->
                                <div class="row">
                                    <!-- 通过表单 -->
                                    <div class="col-md-6">
                                        <form th:action="@{/expense/complete/{taskId}(taskId=${task.id})}" 
                                              method="post" class="needs-validation" novalidate>
                                            <div class="mb-3">
                                                <label class="form-label">审批意见</label>
                                                <textarea class="form-control" name="comment" rows="3" 
                                                          placeholder="请输入审批意见..." required></textarea>
                                                <div class="invalid-feedback">
                                                    请输入审批意见
                                                </div>
                                            </div>
                                            <input type="hidden" name="outcome" value="通过">
                                            <button type="submit" class="btn btn-success w-100">
                                                <i class="bi bi-check-circle me-1"></i>通过
                                            </button>
                                        </form>
                                    </div>

                                    <!-- 驳回表单 -->
                                    <div class="col-md-6">
                                        <form th:action="@{/expense/complete/{taskId}(taskId=${task.id})}" 
                                              method="post" class="needs-validation" novalidate>
                                            <div class="mb-3">
                                                <label class="form-label">驳回原因</label>
                                                <textarea class="form-control" name="comment" rows="3" 
                                                          placeholder="请输入驳回原因..." required></textarea>
                                                <div class="invalid-feedback">
                                                    请输入驳回原因
                                                </div>
                                            </div>
                                            <input type="hidden" name="outcome" value="驳回">
                                            <button type="submit" class="btn btn-danger w-100">
                                                <i class="bi bi-x-circle me-1"></i>驳回
                                            </button>
                                        </form>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        // 表单验证
        (function () {
            'use strict'
            var forms = document.querySelectorAll('.needs-validation')
            Array.prototype.slice.call(forms).forEach(function (form) {
                form.addEventListener('submit', function (event) {
                    if (!form.checkValidity()) {
                        event.preventDefault()
                        event.stopPropagation()
                    }
                    form.classList.add('was-validated')
                }, false)
            })
        })()
    </script>
</body>
</html> 